<template>
  <div style="margin-bottom: 16vw;background: #fff;padding-top: 4vw">
    <div class="dataBox" v-for="(w,index) in data" :key="index">
      <p style="text-indent: 4vw" class="date">{{w.date}}</p>
      <div class="goods" v-for="(v,i) in w.list" :key="i" @click="routeTo(v)">
        <!-- <div class="goods"  v-for="(v,index) in list" :key="index">-->
        <!--<router-link :to="'detail?type=1&join_id=0&group_id=0&limit_id=0&goods_id='+v.goods_id">-->
        <img :src=v.image alt="">
        <div style="width: 100%;height:auto;padding-left: 2vw">
          <p class="scrip" style="height: 11.2vw;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;">{{v.goods_name}}</p>
          <p class="price">￥{{v.sell_price}}
            <span class="usedPrice">￥{{v.market_price}}</span>
            <!--<span class="liked">{{v.popularity}}</span>
            <img src="../../assets/img/fire.png" alt="">-->
          </p>
        </div>
        <!--</router-link>-->
      </div>
      <div class="clear"></div>
    </div>
    <div class="width:100%;height:11vw;"></div>
  </div>
</template>

<script>
  import request from '../../request/index'
  export default {
    name: "selectedAds",
    props:["goodsList"],
    data(){
      return{
        /*list:[],*/
        data:[],
        page:1,
      }
    },
    mounted(){
      document.title="足迹"
    },
    inject:["reload"],
    methods:{
      router(){
        window.location.href="http://www.napin.com/download.html"
      },
      routeTo(v){
        this.$router.push({
          path:'detail',query:{type:1,limit_id:0,group_id:0,join_id:0,goods_id:v.goods_id}
        });
        /* this.reload();*/
      }
    },
    created(){
     /* request.guessLike(this);*/
      request.getHistory(this);
    },
  }
</script>

<style scoped lang="scss">
  @media screen and (min-width: 320px) and (max-width: 370px){
    .text{
      width: 94% !important;
    }
  }
  .dataBox{
    width: 100%;
    height: auto;
  }
  .date{
    text-indent: 5vw;
    color: #333;
    font-size: 15px;
  }
  .text{
    width:82%;
    height:7vw;
    margin: 0px auto;
    img{
      float:left;
      margin-top: 2.7vw;
      width:37%;
      height: .5vw;
    }
    p{
      float: left;
      font-size: 16px;
      color: #ff5230;
      margin-left:2vw;
      margin-right:2vw;
    };
  }
  .goods{
    width:44vw;
    height:auto;
    margin:3vw 0vw 3vw 4vw;
    border-radius: 2px;
    background: #f5f5f5;
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /* padding-left: 2vw;*/
    overflow: hidden;
    .price{
      font-size:13px;
      color: #353535;
      .usedPrice{
        font-size: 10px;
        color: #888;
        text-decoration: line-through;
      }
      .liked{
        font-size: 10px;
        color: #ff4c50;
        float: right;
        margin-right:3vw;
      }
      img{
        width:2.67vw;
        height:3.2vw;
        display: inline-block;
        float: right;
      }
      .oldPrice{
        font-size: 10px;
        color: #888888;
        text-decoration: line-through;
      }
    }
    .hot{
      width:8vw;
      height:4vw;
      background:#ff4c50;
      color: #fff;
      line-height:4vw;
      text-align: center;
      justify-content: center;
      margin-top: 2vw;
      margin-bottom: 2vw;
    }
    .scrop{
      color: #353535;
      font-size: 13px;
      text-align: left;
      margin-bottom: 2vw;
    }
    img{
      width:44vw;
      height:44vw;
      margin-bottom: -1vw;
    }
  }
</style>
